Centring an HTML element relative to its parent when its width is greater than its parent. [closed]
Posted
by
casr
on Pro Webmasters
See other posts from Pro Webmasters
or by casr
Published on 2011-02-05T12:53:10Z
Indexed on
2011/02/05
15:33 UTC
Read the original article
Hit count: 263
I mocked up my intended outcome. So the blue element is the main content of the website and the yellow element represents something like a diagram or an image that has a greater width than the blue element.
Ideally, I would like a purely CSS solution that is able to deal with various sizes of images. I have tried various things but have failed so far. I hope you can help!
Here’s some example markup to set you on your way.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#el1 {
display: block;
margin: 0 auto;
width: 30em;
background-color: #8cabde
}
#el2 {
/* works when the width is
less than the parent */
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<article id=el1>
<p>Some content above.</p>
<img id=el2 src=http://i.imgur.com/JFfGG.gif
title=spaceball width=600 height=400>
<p>Some content below.</p>
</article>
</body>
</html>
© Pro Webmasters or respective owner
